{% extends "base.html" %}

{% block content %}
<style>
/* 液态玻璃页面标题 */
.page-title {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
}

.page-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.page-title h2 {
    color: #1C1C1E !important;
    text-shadow: 0 2px 4px rgba(0, 122, 255, 0.1);
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 1.5rem;
}

.page-title p {
    color: #666 !important;
    margin: 0.25rem 0 0 0;
    position: relative;
    z-index: 1;
    font-size: 0.9rem;
}

/* 液态玻璃卡片 */
.card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    transition: var(--transition) !important;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem !important;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
}

.card-header {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: #1C1C1E !important;
    font-weight: 600;
    position: relative;
    z-index: 1;
    padding: 1rem 1.5rem !important;
}

.card-body {
    position: relative;
    z-index: 1;
    color: #1C1C1E !important;
    padding: 1.5rem !important;
}

/* 液态玻璃表单标签 */
.form-label {
    color: #1C1C1E !important;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 122, 255, 0.1);
}

/* 液态玻璃表单控件 */
.form-control, .form-select {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    color: #1C1C1E !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.form-control::before, .form-select::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.form-control:focus, .form-select:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 
        0 0 0 0.2rem rgba(255, 255, 255, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px);
    color: #1C1C1E !important;
}

.form-control:focus::before, .form-select:focus::before {
    opacity: 1;
}

.form-control::placeholder {
    color: rgba(28, 28, 30, 0.6) !important;
}

/* 表单文本 */
.form-text {
    color: rgba(28, 28, 30, 0.7) !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
}

/* 液态玻璃按钮 */
.btn {
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: var(--transition) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.btn-primary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    padding: 0.75rem 2rem !important;
}

.btn-primary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    padding: 0.75rem 2rem !important;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

/* 液态玻璃徽章 */
.badge {
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important;
}

.badge:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* 信息文本样式 */
.info-text {
    color: #1C1C1E !important;
    font-weight: 500 !important;
}

.info-text strong {
    color: #1C1C1E !important;
    font-weight: 600 !important;
}

/* 暗色模式适配 */
[data-theme="dark"] .page-title {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .page-title::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .page-title h2 {
    color: #ffffff !important;
}

[data-theme="dark"] .page-title p {
    color: #bdc3c7 !important;
}

[data-theme="dark"] .card {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .card-header {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .card-body {
    color: #ffffff !important;
}

[data-theme="dark"] .form-label {
    color: #ffffff !important;
}

[data-theme="dark"] .form-control, [data-theme="dark"] .form-select {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .form-text {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .btn-primary {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-primary:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-secondary {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .info-text {
    color: #ffffff !important;
}

[data-theme="dark"] .info-text strong {
    color: #ffffff !important;
}
</style>

<div class="container-fluid">
    <!-- 页面标题 -->
    <div class="page-title">
        <h2><i class="fas fa-edit me-2"></i>编辑自定义定时任务</h2>
        <p>修改任务配置，更新执行计划和关联脚本</p>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- 编辑表单卡片 -->
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-cogs me-2"></i>任务配置
                    </h6>
                </div>
                <div class="card-body">
                    <form method="POST">
                        <div class="mb-3">
                            <label for="name" class="form-label">
                                <i class="fas fa-tag me-1"></i>任务名称 <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="name" name="name" required 
                                   value="{{ task.name }}" placeholder="请输入任务名称">
                            <div class="form-text">任务的唯一标识名称</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="description" class="form-label">
                                <i class="fas fa-align-left me-1"></i>任务描述
                            </label>
                            <textarea class="form-control" id="description" name="description" rows="3" 
                                      placeholder="请输入任务描述（可选）">{{ task.description or '' }}</textarea>
                            <div class="form-text">描述任务的功能和用途</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="script_id" class="form-label">
                                <i class="fas fa-file-code me-1"></i>选择脚本 <span class="text-danger">*</span>
                            </label>
                            <select class="form-select" id="script_id" name="script_id" required>
                                <option value="">请选择要执行的脚本</option>
                                {% for script in scripts %}
                                <option value="{{ script.id }}" {% if script.id == task.script_id %}selected{% endif %}>
                                    {{ script.name }} - {{ script.filename }} - {{ script.file_path }}
                                </option>
                                {% endfor %}
                            </select>
                            <div class="form-text">选择要定时执行的Python脚本</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="cron_expression" class="form-label">
                                <i class="fas fa-calendar-alt me-1"></i>Cron表达式 <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="cron_expression" name="cron_expression" required 
                                   value="{{ task.cron_expression }}" placeholder="例如: 0 * * * * (每小时执行)">
                            <div class="form-text">使用标准5字段cron表达式，不包含秒</div>
                        </div>
                        
                        <div class="d-flex justify-content-between">
                            <a href="{{ url_for('extended_tasks') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>返回
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>保存修改
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 任务信息卡片 -->
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-info-circle me-2"></i>任务信息
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p class="info-text">
                                <strong><i class="fas fa-calendar-plus me-1"></i>创建时间：</strong>
                                {{ task.created_at.strftime('%Y-%m-%d %H:%M:%S') }}
                            </p>
                            <p class="info-text">
                                <strong><i class="fas fa-clock me-1"></i>最后执行：</strong>
                                {% if task.last_run_time %}
                                    {{ task.last_run_time.strftime('%Y-%m-%d %H:%M:%S') }}
                                {% else %}
                                    <span class="text-muted">未执行</span>
                                {% endif %}
                            </p>
                        </div>
                        <div class="col-md-6">
                            <p class="info-text">
                                <strong><i class="fas fa-info-circle me-1"></i>执行状态：</strong>
                                {% if task.last_run_status %}
                                    <span class="badge bg-{{ 'success' if task.last_run_status == '成功' else 'danger' }}">
                                        <i class="fas fa-{{ 'check-circle' if task.last_run_status == '成功' else 'times-circle' }} me-1"></i>
                                        {{ task.last_run_status }}
                                    </span>
                                {% else %}
                                    <span class="text-muted">无</span>
                                {% endif %}
                            </p>
                            <p class="info-text">
                                <strong><i class="fas fa-stopwatch me-1"></i>执行时长：</strong>
                                {% if task.last_run_duration %}
                                    {{ "%.2f"|format(task.last_run_duration) }}秒
                                {% else %}
                                    <span class="text-muted">无</span>
                                {% endif %}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 